<template>
  <div class="product-card">
    <div class="release_name color" :class="'level-'+color">
      {{ name }}
    </div>
    <div class="release_colum">
      <div class="release_sub">
        {{ desc }}
      </div>
      <div class="release_title">
        {{ target }}
      </div>
      <div class="del_price">
        <del class="del_price">￥<span class="old_price">{{ oldPrice }}</span>/年</del>
      </div>
      <div class="new_price">
        ￥ <span>{{ price }}</span>/年
      </div>
      <a-button class="release_buy_mouse" @click="showPayModal">
        开通{{ name }}
      </a-button>
    </div>
    <pay-modal ref="payModal" :code="code"/>

  </div>
</template>

<script>
  import PayModal from './pay-modal'

  export default {
    name: 'ProductCard',
    components: { PayModal },
    props: {
      name: {
        type: String,
        default: ''
      },
      code: {
        type: String,
        default: ''
      },
      color: {
        type: [String, Number],
        default: 0
      },
      desc: {
        type: String,
        default: ''
      },
      target: {
        type: String,
        default: ''
      },
      oldPrice: {
        type: [String, Number],
        default: ''
      },
      price: {
        type: [String, Number],
        default: ''
      }
    },
    methods: {
      showPayModal () {
        this.$refs.payModal.show()
      }
    }
  }
</script>

<style lang="less">
  .product-card {
    width: 320px;
    min-height: 580px;
    display: flex;
    flex-direction: column;

    .color {
      &.level-0 {
        background-image: linear-gradient(90deg, #fe8636, #de1f26);
      }

      &.level-1 {
        background-image: linear-gradient(90deg, #fa5041, #e6463a);
      }

      &.level-2 {
        background: #fe8636;
      }
    }

    .release_name {
      width: 100%;
      height: 83px;
      line-height: 83px;
      color: #fff;
      text-align: center;
      font-size: 28px;
    }

    .release_colum {
      padding: 0 45px 28px;
      flex-grow: 1;
      background-color: #fff;
      box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    }

    .release_sub {
      color: #999;
      padding: 32px 0 25px;
      border-bottom: 1px solid #e8e8e8;
      min-height: 142px;
    }

    .release_sub, .release_title {
      font-size: 14px;
      text-align: left;
    }

    .release_title {
      color: #353535;
      padding: 14px 0;
      height: 130px;
    }

    .del_price {
      color: #999;
      text-align: center;
      font-size: 18px;
    }

    .new_price {
      color: #353535;
      text-align: center;
      font-size: 16px;
      position: relative;
      left: 0;
      top: -10px;
    }

    .new_price > span {
      color: #de1f26;
      font-size: 40px;
    }

    .release_buy_mouse {
      text-align: center;
      color: #fff;
      background-color: #de1f26;
      border-radius: 2px;
      width: 162px;
      height: 52px;
      line-height: 52px;
      margin: 10px auto 20px;
      box-shadow: 0 6px 16px rgba(0, 0, 0, .11);
      cursor: pointer;
      font-size: 18px;
    }
  }
</style>
